import { Application, Container, Ticker } from "pixi.js";
import { MapSize } from "./config/game-config";
import { GameManager } from "./GameManager";
import { LoaderManager } from "./util/LoaderManager";

export class App {
  public static stage: Container | undefined = undefined;
  public static ticker: Ticker | undefined = undefined;

  constructor() {
    this.initGame();
  }
  private initGame() {
    const { view, stage, ticker, loader } = new Application({
      width: MapSize,
      height: MapSize,
    });

    App.stage = stage;
    App.ticker = ticker;
    LoaderManager.loader = loader;

    view.id = "zhanqi";
    document.body.appendChild(view);

    LoaderManager.onLoader([
      // mapcell
      { name: "grass", url: "../assets/mapCell/grass.png" },
      { name: "forest", url: "../assets/mapCell/forest.png" },
      { name: "river", url: "../assets/mapCell/river.png" },
      { name: "mountain", url: "../assets/mapCell/mountain.png" },
      { name: "plain", url: "../assets/mapCell/plain.png" },
      // chess
      { name: "guest", url: "../assets/chess/guest.png" },
      { name: "knight", url: "../assets/chess/knight.png" },
    ]).then(this.onStartGame);
  }

  private onStartGame() { 
    const game = new GameManager()
    game.init()
  }
}

new App();
